import React, { Component } from 'react'
import Test from './Test'
const xxxRef = React.createRef()
export default class App extends Component {
  render() {
    return (
      <div>
        App
        <hr />
        {/* 和标签绑定,拿到的是标签的真实dom */}
        {/* <h1 ref={xxxRef}>测试</h1> */}
        {/* 如果和类组件绑定,拿到的是组件的实例 */}
        {/* <Test ref={xxxRef}></Test> */}
        {/* 函数组件是不能写ref的. Test使用了React.forwardRef之后,可以写ref了,但是不能获取到组件实例,只是把ref对象传入了Test组件内部 */}
        <Test ref={xxxRef} ></Test>
        <button
          onClick={() => {
            console.log(xxxRef.current.focus())
            // 点击按钮,让Test组件内部的input获取焦点
          }}
        >
          按钮
        </button>
      </div>
    )
  }
}
